<template>
    <n-button @click="showModal=true">批量添加学生</n-button>
    <!--添加学生模态框-->
    <n-modal
        v-model:show="showModal"
        :mask-closable="false"
        preset="dialog"
        title="批量添加学生"
    >
        <div>
            <p>请选择班级: <span class="pointer" style="float: right;font-size: 10px"><a
                :href="STATIC + 'excel/批量导入学生模板.xlsx'">获取模板</a></span></p>
            <n-select v-model:value="class_id" :options="useAdmin.class['enable']"/>
        </div>

        <n-upload
            ref="uploadRef"
            :disabled="!class_id"
            :action="app.ip+'register/students'"
            :file-list-style="{display:'none'}"
            :headers="{token: user.getToken}"
            :data="{
          class_id:class_id
        }"
            @before-upload="before"
            @finish="handleFinish"
        >
            <n-tooltip trigger="hover" placement="right">
                <template #trigger>
                    <n-button v-show="!class_id" :disabled="!class_id">上传文件</n-button>
                </template>
                请先选择班级
            </n-tooltip>
            <n-button v-show="!!class_id" :disabled="!class_id">上传文件</n-button>
        </n-upload>

    </n-modal>
</template>

<script setup>

import {NButton} from "naive-ui";
import {useAppStore} from "@/stores/app";
import {useUserStore} from "@/stores/user";
import {useAdminStore} from "@/stores/admin";
import {STATIC} from "@/assets/server";

const emit = defineEmits(['handleFinish'])
const app = useAppStore()
const user = useUserStore()
const uploadRef = ref(null)
const useAdmin = useAdminStore()
// 模态框展示
const showModal = ref(false)
const class_id = ref("")
let messageReactive = null

function before() {
    if (!messageReactive) {
        messageReactive = window.$message.loading("批量添加中, 请耐心等待...", {
            duration: 0
        });
    }
}

function handleFinish({event}) {
    let r = JSON.parse(event.target.response)
    window.$message[r.tip.type](r.tip.info)
    if (messageReactive) {
        messageReactive.destroy();
        messageReactive = null;

    }
    console.log(r)
    if (r.success) {
        showModal.value = false
        emit("handleFinish")
    }
    useAdmin.setStudents();
}
</script>

<style scoped lang="less">
.n-button {
    margin: 15px;
}
</style>